<!-- /* <template>
  <div class="box">
    <span>桌号管理</span>
    <div class="buttom">
      <el-button type="success" size="medium" @click="open">添加桌号</el-button>
    </div>
    <主体部分 -->
    <!-- <div class="subject"> -->
      <!-- 表头 -->
      <!-- <div class="header">
        <span v-for="(item, index) in tablist" :key="index">{{ item }}</span>
      </div> -->
      <!-- 表格 -->
      <!-- <div class="table" v-for="(item, index) in 6" :key="index">
        <div>2022-10-19 11:22:29</div>
        <div>1003</div>
        <div><img style="height: 20px;" src="../../assets/images/beijing.jpg" alt=""></div>
      </div>
    </div> -->
    <!-- 没有数据 -->
    <!-- <div class="non-vegetable" v-else>还没有菜品哦！</div> -->
  <!-- </div>
</template> -->

<!-- <script>
export default {
  data() {
    return {
      tablist: ['创作时间', '桌号', '桌号二维码']
    }
  },
  methods: {
    open() {
      this.Message_Box.MesssageBoxQuestion("请输入桌台号", true)
        .then(({ value }) => {
          if (value == null) this.Message_Box.MessageWarning("输入不能为空");
          console.log(value);
        })
        .catch(() => {
          this.Message_Box.MessageInfo("取消输入");
        });
    }
  },
}
</script> -->

<!-- <style lang="less" scoped>
.box {
  position: relative;
  padding: 0 9.6% 0;
  width: 100%;
  z-index: -1;
  background-color: #f6f8f9;
}

.box span {
  padding-top: 10px;
  font-weight: 700;
  display: block;
  font-size: 18px;
}

.box .buttom {
  width: 1000px;
  height: 120px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.box .buttom button {
  width: 120px;
  height: 40px;
}

.subject {
  width: 1000px;
  background-color: #ffffff;
}

.subject .header {
  width: 100%;
  height: 40px;
  line-height: 25px;
  padding: 0 65px;
  display: flex;
  justify-content: space-between;
}

.subject .header span {
  font-size: 12px;
  font-weight: 500;
}

.non-vegetable {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}

.table {
  padding: 0 30px;
  display: flex;
  height: 40px;
  line-height: 40px;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
}

.table div:nth-child(3) {
  margin: 10px 50px 0 85px;
}

.el-pagination {
  text-align: center;
  margin-top: 40px;
  white-space: nowrap;
  color: #303133;
  font-weight: 700;
}
</style> -->



<template>
  <div class="ordering" v-loading.fullscreen.lock="loading">
    <div class="heading">桌号管理</div>
    <div class="content-view">
      <div class="button-view">
        <el-button type="success" size="medium" @click="open">添加桌号</el-button>
      </div>
      <div v-if="nodatas">
        <!-- 表头 -->
        <div class="tab-list">
          <span v-for="(item, index) in tablist" :key="index">{{ item }}</span>
        </div>
        <!-- 表格 -->
        <div class="tab-table" v-for="(item, index) in tabcont" :key="index">
          <div>{{ item.time }}</div>
          <div>{{ item.table }}</div>
          <div>
            <el-image class="elimg" :src="item.code" fit="cover" :lazy="true" :preview-src-list="[item.code]">
            </el-image>
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :hide-on-single-page="true" :total="total"
          :current-page="currentnum" @current-change="currentchange">
        </el-pagination>
      </div>
      <!-- 没有数据 -->
      <div class="nodatas" v-if="!nodatas">还没有桌号</div>
    </div>
    <div style="height: 120px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      nodatas: true,
      tablist: ['创建时间', '桌号', '点餐二维码'],
      tabcont: [],
      total: 0,//总条数
      pagenum: 0,
      currentnum: 1,//当前页数
    }
  },
  methods: {
    // 分页
    currentchange(e) {
      this.pagenum = e - 1
    },
    // 添加桌号
    open() {
      const regular = /^[0-9]*$/
      this.Message_Box.MesssageBoxQuestion("请输入桌台号", true)
        .then(({ value }) => {
          if (!regular.test(value)) {
            this.Message_Box.MessageWarning("桌号格式不正确,应为数字类型");
          }
          if (value == null) this.Message_Box.MessageWarning("输入不能为空");
          this.add_table(value)
        })
        .catch((e) => {
          if (e=='cancel') this.Message_Box.MessageInfo("取消输入");
          this.Message_Box.MessageInfo("程序错误，请联系管理员！");
        });
    },
    // 添加桌号：发起请求
    async add_table(table) {
      try {
        console.log(table,'table');
        let res = await new this.request(this.URL.m().qrcode+ '?table=' + table ).GET()
        console.log(res,'res');
        if (res.status != 200) {
          this.Message_Box.MessageInfo(res.data.msg)
        } else {
          this.Message_Box.MessageSuccess("桌号添加成功");
          this.currentnum = 1
          this.pagenum = 0
          this.getqrcode()
        }
      } catch (e) {
        this.Message_Box.MessageInfo("程序错误，请联系管理员！");
      }
    },
    // 获取桌号
    async getqrcode() {
      try {
        let res = await new this.request(this.URL.m().getqrcode + '?page=' + this.pagenum).GET()
        this.nodatas = res.data.data.tatal == 0 ? false : true
        this.tabcont = res.data.data.result
        this.total = res.data.data.tatal
        this.loading = false
      } catch (e) {
        this.Message_Box.MessageInfo("程序错误，请联系管理员！");
      }
    }
  },
  created() {
    this.getqrcode()
  }
}
</script>

<style scoped="scoped">
@import url("@/assets/style/pubiss.css");

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #00be06;
  color: #fff;
}

/* 分页 */
.el-pagination {
  text-align: center;
  margin: 30px 0;
}
</style>







